<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>存储记录管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col">
                <h2>存储记录管理</h2>
            </div>
            <div class="col text-end">
                <button class="btn btn-primary" onclick="showCreateStorageModal()">
                    <i class="bi bi-plus"></i> 新建存储记录
                </button>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>记录编号</th>
                                <th>仓库名称</th>
                                <th>订单编号</th>
                                <th>货物类型</th>
                                <th>存储容量(m³)</th>
                                <th>入库时间</th>
                                <th>出库时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="storageList">
                            <!-- 存储记录列表 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 新建存储记录模态框 -->
    <div class="modal fade" id="createStorageModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">新建存储记录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="createStorageForm">
                        <div class="mb-3">
                            <label class="form-label">仓库</label>
                            <select class="form-select" name="warehouseId" required>
                                <option value="">请选择仓库</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">订单</label>
                            <select class="form-select" name="orderId" required>
                                <option value="">请选择订单</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">存储容量(m³)</label>
                            <input type="number" class="form-control" name="storageCapacity" step="0.01" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="createStorage()">创建</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(function() {
            loadStorages();
            loadWarehouses();
            loadOrders();
        });

        function loadStorages() {
            $.get('/storage/list', function(res) {
                if (res.code === 200) {
                    const storages = res.data;
                    let html = '';
                    storages.forEach(storage => {
                        html += `
                            <tr>
                                <td>${storage.storageNo}</td>
                                <td>${storage.warehouseName}</td>
                                <td>${storage.orderNo}</td>
                                <td>${storage.cargoType}</td>
                                <td>${storage.storageCapacity}</td>
                                <td>${new Date(storage.inTime).toLocaleString()}</td>
                                <td>${storage.outTime ? new Date(storage.outTime).toLocaleString() : '-'}</td>
                                <td>
                                    <button class="btn btn-sm btn-info" onclick="viewStorage(${storage.id})">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="btn btn-sm btn-danger" onclick="deleteStorage(${storage.id})">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        `;
                    });
                    $('#storageList').html(html);
                }
            });
        }

        function loadWarehouses() {
            $.get('/warehouse/list', function(res) {
                if (res.code === 200) {
                    const warehouses = res.data;
                    let html = '<option value="">请选择仓库</option>';
                    warehouses.forEach(warehouse => {
                        html += `<option value="${warehouse.id}">${warehouse.name}</option>`;
                    });
                    $('select[name="warehouseId"]').html(html);
                }
            });
        }

        function loadOrders() {
            $.get('/order/list', function(res) {
                if (res.code === 200) {
                    const orders = res.data;
                    let html = '<option value="">请选择订单</option>';
                    orders.forEach(order => {
                        html += `<option value="${order.id}">${order.orderNo}</option>`;
                    });
                    $('select[name="orderId"]').html(html);
                }
            });
        }

        function showCreateStorageModal() {
            $('#createStorageForm')[0].reset();
            new bootstrap.Modal('#createStorageModal').show();
        }

        function createStorage() {
            const formData = {};
            $('#createStorageForm').serializeArray().forEach(item => {
                formData[item.name] = item.value;
            });

            $.ajax({
                url: '/storage',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(res) {
                    if (res.code === 200) {
                        alert('创建成功');
                        $('#createStorageModal').modal('hide');
                        loadStorages();
                    } else {
                        alert(res.message);
                    }
                }
            });
        }

        function viewStorage(id) {
            // TODO: 实现查看存储记录详情
        }

        function deleteStorage(id) {
            if (!confirm('确定要删除这个存储记录吗？')) return;

            $.ajax({
                url: `/storage/${id}`,
                type: 'DELETE',
                success: function(res) {
                    if (res.code === 200) {
                        alert('删除成功');
                        loadStorages();
                    } else {
                        alert(res.message);
                    }
                }
            });
        }
    </script>
</body>
</html> 